<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画属性学习工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            margin-bottom: 30px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #4a6fa5;
            margin-bottom: 10px;
        }
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        .demo-area {
            background-color: #fff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .animation-box {
            width: 150px;
            height: 150px;
            background-color: #4a6fa5;
            margin: 30px 0;
            border-radius: 8px;
            position: relative;
        }
        .controls {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            max-height: 600px;
        }
        .control-group {
            margin-bottom: 20px;
        }
        .control-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        select, input[type="range"], input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        input[type="range"] {
            margin-bottom: 5px;
        }
        .range-value {
            font-size: 12px;
            color: #888;
            text-align: right;
        }
        .code-display {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 14px;
            max-height: 300px;
            overflow-y: auto;
        }
        .play-pause-btn {
            background-color: #4a6fa5;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }
        .play-pause-btn:hover {
            background-color: #3a5f85;
        }
        .keyframe-editor {
            margin-top: 30px;
        }
        .keyframe-content {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 14px;
            height: 150px;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        .preset-btn {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .preset-btn:hover {
            background-color: #5a6268;
        }
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>CSS动画属性学习工具</h1>
            <p>通过调整下方的参数，实时体验CSS动画的各种效果</p>
        </header>
        
        <div class="main-content">
            <div class="demo-area">
                <h2>动画预览</h2>
                <div class="animation-box" id="animationBox"></div>
                <p>当前动画状态: <span id="animationStatus">暂停</span></p>
                <button class="play-pause-btn" id="playPauseBtn" onclick="toggleAnimation()">开始动画</button>
            </div>
            
            <div class="controls">
                <h2>动画参数设置</h2>
                
                <!-- 动画名称 -->
                <div class="control-group">
                    <label for="animationName">动画名称 (animation-name)</label>
                    <select id="animationName" onchange="updateAnimation()">
                        <option value="slideAnimation">滑动动画</option>
                        <option value="rotateAnimation">旋转动画</option>
                        <option value="scaleAnimation">缩放动画</option>
                        <option value="bounceAnimation">弹跳动画</option>
                        <option value="customAnimation">自定义动画</option>
                    </select>
                </div>
                
                <!-- 动画持续时间 -->
                <div class="control-group">
                    <label for="animationDuration">动画持续时间 (animation-duration): <span class="range-value" id="durationValue">2s</span></label>
                    <input type="range" id="animationDuration" min="0.1" max="5" step="0.1" value="2" oninput="updateDuration()">
                </div>
                
                <!-- 动画时间曲线 -->
                <div class="control-group">
                    <label for="animationTiming">动画时间曲线 (animation-timing-function)</label>
                    <select id="animationTiming" onchange="updateAnimation()">
                        <option value="linear">linear</option>
                        <option value="ease">ease</option>
                        <option value="ease-in">ease-in</option>
                        <option value="ease-out">ease-out</option>
                        <option value="ease-in-out">ease-in-out</option>
                        <option value="cubic-bezier(0.68,-0.55,0.27,1.55)">弹跳曲线</option>
                        <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">快速启动曲线</option>
                    </select>
                </div>
                
                <!-- 动画延迟 -->
                <div class="control-group">
                    <label for="animationDelay">动画延迟时间 (animation-delay): <span class="range-value" id="delayValue">0s</span></label>
                    <input type="range" id="animationDelay" min="0" max="3" step="0.1" value="0" oninput="updateDelay()">
                </div>
                
                <!-- 动画播放次数 -->
                <div class="control-group">
                    <label for="animationIteration">动画播放次数 (animation-iteration-count)</label>
                    <select id="animationIteration" onchange="updateAnimation()">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="5">5</option>
                        <option value="infinite" selected>infinite</option>
                    </select>
                </div>
                
                <!-- 动画方向 -->
                <div class="control-group">
                    <label for="animationDirection">动画方向 (animation-direction)</label>
                    <select id="animationDirection" onchange="updateAnimation()">
                        <option value="normal" selected>normal</option>
                        <option value="reverse">reverse</option>
                        <option value="alternate">alternate</option>
                        <option value="alternate-reverse">alternate-reverse</option>
                    </select>
                </div>
                
                <!-- 动画填充模式 -->
                <div class="control-group">
                    <label for="animationFill">动画填充模式 (animation-fill-mode)</label>
                    <select id="animationFill" onchange="updateAnimation()">
                        <option value="none" selected>none</option>
                        <option value="forwards">forwards</option>
                        <option value="backwards">backwards</option>
                        <option value="both">both</option>
                    </select>
                </div>
                
                <!-- 动画代码展示 -->
                <h3 style="margin-top: 30px;">生成的CSS代码</h3>
                <div class="code-display" id="codeDisplay">
/* 动画属性代码将在这里显示 */
.animation-box {
    animation-name: slideAnimation;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: paused;
    
    /* 简写形式 */
    /* animation: slideAnimation 2s ease 0s infinite normal none paused; */
}

/* 动画关键帧定义 */
@keyframes slideAnimation {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(100px);
    }
}                </div>
            </div>
        </div>
        
        <!-- 自定义关键帧编辑器 -->
        <div class="keyframe-editor" style="margin-top: 30px;">
            <h2>关键帧动画预设</h2>
            <div>
                <button class="preset-btn" onclick="applyKeyframePreset('slide')">滑动动画</button>
                <button class="preset-btn" onclick="applyKeyframePreset('rotate')">旋转动画</button>
                <button class="preset-btn" onclick="applyKeyframePreset('scale')">缩放动画</button>
                <button class="preset-btn" onclick="applyKeyframePreset('bounce')">弹跳动画</button>
                <button class="preset-btn" onclick="applyKeyframePreset('color')">颜色渐变</button>
                <button class="preset-btn" onclick="applyKeyframePreset('3drotate')">3D旋转</button>
            </div>
            
            <div class="keyframe-content" id="keyframeContent">
/* 关键帧动画定义 */

@keyframes slideAnimation {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(100px);
    }
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scaleAnimation {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(0.5);
    }
}

@keyframes bounceAnimation {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

@keyframes customAnimation {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        background-color: #4a6fa5;
    }
    25% {
        transform: translate(100px, -50px) rotate(90deg) scale(1.2);
        background-color: #ff6b6b;
    }
    50% {
        transform: translate(0, 100px) rotate(180deg) scale(0.8);
        background-color: #4ecdc4;
    }
    75% {
        transform: translate(-100px, -50px) rotate(270deg) scale(1.2);
        background-color: #ffe66d;
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
        background-color: #4a6fa5;
    }
}
            </div>
        </div>
    </div>

    <style id="dynamicKeyframes">
        @keyframes slideAnimation {
            0% {
                transform: translateX(-100px);
            }
            100% {
                transform: translateX(100px);
            }
        }
        
        @keyframes rotateAnimation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes scaleAnimation {
            0% {
                transform: scale(0.5);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(0.5);
            }
        }
        
        @keyframes bounceAnimation {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(-15px);
            }
        }
        
        @keyframes customAnimation {
            0% {
                transform: translate(0, 0) rotate(0deg) scale(1);
                background-color: #4a6fa5;
            }
            25% {
                transform: translate(100px, -50px) rotate(90deg) scale(1.2);
                background-color: #ff6b6b;
            }
            50% {
                transform: translate(0, 100px) rotate(180deg) scale(0.8);
                background-color: #4ecdc4;
            }
            75% {
                transform: translate(-100px, -50px) rotate(270deg) scale(1.2);
                background-color: #ffe66d;
            }
            100% {
                transform: translate(0, 0) rotate(360deg) scale(1);
                background-color: #4a6fa5;
            }
        }
    </style>

    <script>
        // 获取DOM元素
        const animationBox = document.getElementById('animationBox');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const animationStatus = document.getElementById('animationStatus');
        const codeDisplay = document.getElementById('codeDisplay');
        const keyframeContent = document.getElementById('keyframeContent');
        const dynamicKeyframes = document.getElementById('dynamicKeyframes');
        
        // 初始化动画状态
        let isPlaying = false;
        let currentDuration = 2;
        let currentDelay = 0;
        
        // 更新动画属性
        function updateAnimation() {
            const animationName = document.getElementById('animationName').value;
            const animationTiming = document.getElementById('animationTiming').value;
            const animationIteration = document.getElementById('animationIteration').value;
            const animationDirection = document.getElementById('animationDirection').value;
            const animationFill = document.getElementById('animationFill').value;
            
            // 构建完整的动画CSS
            const animationCSS = `${animationName} ${currentDuration}s ${animationTiming} ${currentDelay}s ${animationIteration} ${animationDirection} ${animationFill} ${isPlaying ? 'running' : 'paused'}`;
            
            // 应用动画
            animationBox.style.animation = animationCSS;
            
            // 更新代码显示
            updateCodeDisplay(animationName, currentDuration, animationTiming, currentDelay, animationIteration, animationDirection, animationFill);
        }
        
        // 更新持续时间
        function updateDuration() {
            currentDuration = document.getElementById('animationDuration').value;
            document.getElementById('durationValue').textContent = `${currentDuration}s`;
            updateAnimation();
        }
        
        // 更新延迟时间
        function updateDelay() {
            currentDelay = document.getElementById('animationDelay').value;
            document.getElementById('delayValue').textContent = `${currentDelay}s`;
            updateAnimation();
        }
        
        // 更新代码显示
        function updateCodeDisplay(name, duration, timing, delay, iteration, direction, fill) {
            const code = `/* 动画属性代码 */
.animation-box {
    animation-name: ${name};
    animation-duration: ${duration}s;
    animation-timing-function: ${timing};
    animation-delay: ${delay}s;
    animation-iteration-count: ${iteration};
    animation-direction: ${direction};
    animation-fill-mode: ${fill};
    animation-play-state: ${isPlaying ? 'running' : 'paused'};
    
    /* 简写形式 */
    /* animation: ${name} ${duration}s ${timing} ${delay}s ${iteration} ${direction} ${fill} ${isPlaying ? 'running' : 'paused'}; */
}`;
            
            codeDisplay.textContent = code;
        }
        
        // 切换动画播放状态
        function toggleAnimation() {
            isPlaying = !isPlaying;
            
            if (isPlaying) {
                playPauseBtn.textContent = '暂停动画';
                animationStatus.textContent = '播放中';
                animationBox.style.animationPlayState = 'running';
            } else {
                playPauseBtn.textContent = '开始动画';
                animationStatus.textContent = '暂停';
                animationBox.style.animationPlayState = 'paused';
            }
            
            // 更新代码显示
            updateAnimation();
        }
        
        // 应用关键帧预设
        function applyKeyframePreset(type) {
            let keyframeCode = '';
            let animationName = '';
            
            switch(type) {
                case 'slide':
                    animationName = 'slideAnimation';
                    keyframeCode = `@keyframes slideAnimation {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(100px);
    }
}`;
                    break;
                case 'rotate':
                    animationName = 'rotateAnimation';
                    keyframeCode = `@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}`;
                    break;
                case 'scale':
                    animationName = 'scaleAnimation';
                    keyframeCode = `@keyframes scaleAnimation {
    0% {
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(0.5);
    }
}`;
                    break;
                case 'bounce':
                    animationName = 'bounceAnimation';
                    keyframeCode = `@keyframes bounceAnimation {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}`;
                    break;
                case 'color':
                    animationName = 'colorAnimation';
                    keyframeCode = `@keyframes colorAnimation {
    0% {
        background-color: #4a6fa5;
    }
    25% {
        background-color: #ff6b6b;
    }
    50% {
        background-color: #4ecdc4;
    }
    75% {
        background-color: #ffe66d;
    }
    100% {
        background-color: #4a6fa5;
    }
}`;
                    break;
                case '3drotate':
                    animationName = 'rotate3DAnimation';
                    keyframeCode = `@keyframes rotate3DAnimation {
    0% {
        transform: perspective(500px) rotateY(0deg);
    }
    50% {
        transform: perspective(500px) rotateY(180deg);
    }
    100% {
        transform: perspective(500px) rotateY(360deg);
    }
}`;
                    break;
            }
            
            // 更新动态样式
            dynamicKeyframes.textContent = keyframeCode;
            
            // 更新动画名称选择器
            const animationNameSelect = document.getElementById('animationName');
            
            // 检查是否存在该动画名称的选项
            let optionExists = false;
            for (let i = 0; i < animationNameSelect.options.length; i++) {
                if (animationNameSelect.options[i].value === animationName) {
                    optionExists = true;
                    break;
                }
            }
            
            // 如果不存在，则添加
            if (!optionExists) {
                const option = document.createElement('option');
                option.value = animationName;
                option.textContent = animationName.replace(/([A-Z])/g, ' $1').trim();
                animationNameSelect.appendChild(option);
            }
            
            // 选择该动画名称
            animationNameSelect.value = animationName;
            
            // 更新动画
            updateAnimation();
        }
        
        // 初始化
        updateAnimation();
    </script>
</body>
</html>